<template>
	<view class="signin-container" v-if="!loading">
		<view class="signin-top d-s-s">
			<view class="signin-top-left">
				<view class="f26 mb10">{{$t('plus.my_points')}}</view>
				<view class="f62 fb">{{detail.userPoint}}</view>
			</view>
			<view class="">
				<view class="f26 mb10">{{$t('plus.cumulative_check_in')}}</view>
				<view class="f24"><text class="f62 fb">{{detail.days}}</text>{{$t('plus.days')}}</view>
			</view>
		</view>
		<image class="signin-top-img" src="/static/signin/signin-top.png" mode=""></image>
		<view class="clock-in-box">
			<view class="mb30 d-b-c">
				<view class="f32 fb">{{$t('plus.check_in')}}</view>
				<view class="f24 gray9" @click="isPop = true">{{$t('plus.calendar')}}<text class="icon iconfont icon-jiantou1"></text></view>
			</view>
			<view class="d-a-c mb30">
				<view class="d-c-c d-c pr" v-for="(item,index) in detail.week" :key="index">
					<image @click="showgift(index)" v-if="hasReward(index) != -1" class="gift-btn"
						src="/static/signin/gift.png" mode=""></image>
					<view class="thisWeek-item d-c-c d-c" :class="{isSign:item.isSign}">
						<view class="f22">+{{item.rank}}</view>
						<image v-if="item.isSign" class="thisWeek-points" src="/static/signin/signin-issignin.png"
							mode=""></image>
						<image v-else-if="item.rank || item.coupon!=''" class="thisWeek-points"
							src="/static/signin/signin-points.png" mode=""></image>
						<image v-else class="thisWeek-points" src="/static/signin/signin-points-null.png" mode="">
						</image>
					</view>
					<view class="f22">{{item.date}}</view>
				</view>
			</view>
			<view class="">
				<view class="flex-1">
					<view class="f28">{{$t('plus.consecutive_check_ins',{place1:detail.continuousDays})}}<text class="f24 gray9"
							v-if="detail.period">({{detail.period}})</text></view>
					<view class="f24 gray9 mt20" v-if=" reward.length> 0 && reward[0] >= 1"><text
							class="icon iconfont icon-gantanhao1"></text>{{$t('plus.extra_reward',{place1: reward[0] })}}<text
							v-if="point[reward[0]].points" class="mr10">{{ point[reward[0]].points }}{{$t('plus.points')}}</text><text
							v-if="point[reward[0]].couponNum>0">{{ point[reward[0]].couponNum }}{{$t('plus.coupons0')}}</text>
					</view>
				</view>
				<view class="d-c-c mt30">
					<view class="singnin-btn" @click="onSign" v-if="!detail.isSign">{{$t('plus.check_in_now')}}</view>
					<view v-else class="singnin-btn singnined">{{$t('plus.signed_in')}}</view>
				</view>

			</view>
		</view>
		<view class="my-signin">
			<view class="mb30 d-b-c">
				<view class="f32 fb">{{$t('plus.my_check_ins')}}</view>
				<view class="f24 gray9" @click="gotoRuleFunc">{{$t('plus.rules')}}<text class="icon iconfont icon-jiantou1"></text>
				</view>
			</view>
			<view class="my-signin-list">
				<view class="my-signin-item my-item-1">
					<view class="f28">{{$t('plus.points')}}:{{detail.points}}</view>
					<view class="f24 gray9">{{$t('plus.total_points')}}</view>
					<view class="round-opacity"></view>
				</view>
				<view class="my-signin-item my-item-2">
					<view class="f28">{{$t('plus.coupons')}}:{{detail.couponNum *1}}</view>
					<view class="f24 gray9">{{$t('plus.total_coupons')}}</view>
					<view class="round-opacity"></view>
				</view>

				<view class="my-signin-item my-item-3">
					<view class="f28">{{$t('plus.times')}}:{{detail.continuousDays}}</view>
					<view class="f24 gray9">{{$t('plus.consecutive_check_in_count')}}</view>
					<view class="round-opacity"></view>
				</view>
				<view class="my-signin-item my-item-4">
					<view class="f28">{{$t('plus.times')}}:{{detail.days}}</view>
					<view class="f24 gray9">{{$t('plus.total_check_in_count')}}</view>
					<view class="round-opacity"></view>
				</view>
			</view>
		</view>
		<view class="signin-record" v-if="detail.signList">
			<view class="mb10 d-b-c">
				<view class="f32 fb">{{$t('plus.check_in_records')}}</view>
				<view class="f24 gray9" @click="gotoPage('/pages/plus/signin/record')">{{$t('plus.more')}}<text
						class="icon iconfont icon-jiantou1"></text>
				</view>
			</view>
			<view v-for="(item,index) in detail.signList" :key="index" class="signin-record-item">
				<view class="d-b-c mb20">
					<view class="f28">{{$t('plus.check_in_reward')}}</view>
					<view class="gray9">{{item.createTime}}</view>
				</view>
				<view class="f24 d-s-c f-w">
					<view v-for="(citem,cindex) in item.coupon" :key="cindex" class="d-s-c f24">
						<image class="thisWeek-points" src="/static/signin/coupon.png" mode=""></image>
						{{citem.name}}<text class="f24 gray9 f-s-0"
							style="white-space: nowrap;">x{{citem.couponNum}}</text><text class="m-0-10"
							v-if="(cindex!=item.coupon.length-1) || item.points">+</text>
					</view>
					<view v-if="item.points" class="d-s-c">
						<image class="thisWeek-points" src="/static/signin/signin-points.png" mode=""></image>
						{{item.points}}{{$t('plus.points')}}
					</view>
				</view>
			</view>

		</view>
		<template v-if="isPop">
			<view class="pop-bg" @click.stop="isPop = false"></view>
			<view class="sign-calendar-wrap" @click.stop="()=>{}">
				<view class="date-text">{{ today_year }} {{$t('plus.year_month',{place1:today_month})}}</view>
				<view class="week-list">
					<view class="week-item" v-for="(item, index) in weeklist" :key="index">{{ item }}</view>
				</view>
				<view class="date-list-wrap">
					<view class="date-item" :class="item.type != 0 ? 'secondary-date-item' : ''"
						v-for="(item, index) in daylist" :key="index">
						<text v-if="list.indexOf(item.day) > -1 && item.type == 0"
							class="icon-box">{{ item.day }}</text>
						<template v-if="list.indexOf(item.day) == -1">
							<text class="iconfont icon-libao"
								v-if="reward.indexOf(item.day - today + (detail.isSign?0:1)) > -1 && item.type == 0"></text>
							<view v-if="item.type == 0 && reward.indexOf(item.day - today + (detail.isSign?0:1)) == -1">
								<text>{{ item.day }}</text>
							</view>
						</template>
					</view>
				</view>
			</view>
		</template>
		<template v-if="isSuccess">
			<view class="pop-bg" @click.stop="isSuccess = false">
				<view class="pop-success d-c d-b-c">
					<image class="pop-success-top" src="/static/signin/signin-succ.png" mode=""></image>
					<view class="pop-success-title">{{$t('plus.congratulations_check_in')}}</view>
					<view class="f24 d-s-c f-w pop-success-content">
						<view v-for="(citem,cindex) in successModel.coupon" :key="cindex" class="d-s-c f24">
							<image class="thisWeek-points" src="/static/signin/coupon.png" mode=""></image>
							{{citem.name}}<text class="f24 gray9 f-s-0"
								style="white-space: nowrap;">x{{citem.couponNum}}</text><text class="m-0-10"
								v-if="(cindex!=successModel.coupon.length-1) || successModel.points">+</text>
						</view>
						<view v-if="successModel.points" class="d-s-c">
							<image class="thisWeek-points" src="/static/signin/signin-points.png" mode=""></image>
							{{successModel.points}}{{$t('plus.points')}}
						</view>
					</view>
					<view @click.stop="isSuccess = false" class="pop-success-btn">{{$t('plus.got_it')}}</view>
				</view>
			</view>

		</template>

		<!--{{$t('plus.rules')}}-->
		<!-- <view class="rule-btn" @click="gotoRuleFunc">活动规则</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPop: false,
				/*是否正在加载*/
				loading: true,
				/*星期*/
				weeklist: [this.$t('plus.day'), this.$t('plus.monday0'), this.$t('plus.tuesday0'), this.$t('plus.wednesday0'), this.$t('plus.thursday0'), this.$t('plus.friday0'), this.$t('plus.saturday0')],
				/*天数列表*/
				daylist: [],
				/*年*/
				year: null,
				/*今天的年份*/
				today_year: null,
				/*月*/
				month: null,
				/*今天的年份*/
				today_month: null,
				/*天*/
				day: null,
				/*今天的年份*/
				today_day: null,
				/*当月签到的数据*/
				list: [],
				/*奖励天数*/
				reward: [],
				/*当月连续签到的天数*/
				days: 0,
				/*当天日期*/
				today: 0,
				/*今天是否签到*/
				isSign: false,
				/*签到额外积分*/
				point: [],
				detail: {
					userPoint: ''
				},
				isSuccess: false,
				successModel: {},
				indexToday: 0
			};
		},
		mounted() {
			/*初始化*/
			this.init();
		},
		onShow() {
			/*获取优惠券列表*/
			this.getData();
			uni.setNavigationBarTitle({
			title: this.$t('common.sign_in')
		})
		},
		methods: {
			hasReward(n) {
				if (!this.reward || this.reward == '') {
					return -1;
				}
				const searchValue = this.detail.isSign ? n - this.indexToday : n - this.indexToday + 1;
				return this.reward.indexOf(searchValue);
			},
			showgift(n) {
				const d = this.hasReward(n);
				if (d === -1) {
					return;
				}
				const obj = this.point && this.point[this.reward[d]];
				if (!obj) {
					return;
				}
				let text = this.$t('plus.extra_days',{place1:this.reward[d]});
				if (obj.points) {
					text += `${obj.points}积分`;
					if (obj.coupon && obj.coupon.length > 0) {
						text += ',';
					}
				}
				if (obj.coupon && obj.coupon.length > 0) {
					text += obj.coupon.map(item => `${item.name}(${item.couponNum}张)`).join(',');
				}
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: this.$t('plus.loading')
				});
				self._get('plus/sign/sign/index', {}, function(res) {
					self.detail = res.data;
					self.list = res.data.list;
					self.days = res.data.days;
					self.today = res.data.today;
					self.reward = res.data.arr;
					self.point = res.data.point;
					self.indexToday = res.data.indexToday;
					if (self.list.indexOf(self.day) >= 0) {
						self.isSign = true;
					}
					self.loading = false;
					uni.hideLoading();
				});
			},

			/*签到*/
			onSign() {
				let self = this;
				if (self.detail.isSign) {
					uni.showToast({
						title: this.$t('plus.today_signed_in'),
						duration: 2000
					});
					return false;
				}
				uni.showLoading({
					title: this.$t('plus.submitting'),
					mask: true
				});
				self._get('plus/sign/sign/add', {}, function(res) {
					self.successModel = res.data;
					self.isSuccess = true;
					uni.hideLoading();
					self.getData();
					// self.showSuccess(res.msg, function() {});
				});
			},

			/*初始化*/
			init() {
				if (this.year === null && this.month === null && this.day === null) {
					let nowDate = new Date();
					this.year = nowDate.getFullYear();
					this.today_year = nowDate.getFullYear();
					this.month = nowDate.getMonth();
					this.today_month = nowDate.getMonth() + 1;
					this.day = nowDate.getDate();
					this.today_day = nowDate.getDate();
				}
				this.joinDay();
			},

			/*组合天*/
			joinDay() {
				let res = [];
				let currentMonth = this.getMonthCount(this.year, this.month);
				let preMonth = this.getPreMonthCount(this.year, this.month);
				let nextMonth = this.getNextMonthCount(this.year, this.month);
				let whereMonday = this.getWeekday(this.year, this.month);
				let preArr = [];
				if (whereMonday != 0) {
					preArr = preMonth.slice(-1 * whereMonday);
				}

				let nextArr = nextMonth.slice(0, 42 - currentMonth.length - whereMonday);
				let preArrList = this.numConvertNode(preArr, 'pre');
				let currentMonthList = this.numConvertNode(currentMonth, null);
				let nextArrList = this.numConvertNode(nextArr, 'next');

				res = [].concat(preArrList, currentMonthList, nextArrList);
				this.daylist = res;
			},

			/*天数转换*/
			numConvertNode(arr, type) {
				let _type = 0;
				let list = [];
				let len = arr.length;
				if (type != null) {
					if (type == 'pre') {
						_type = -1;
					} else {
						_type = 1;
						if (len > 7) {
							len = len - 7;
						}
					}
				}

				for (let i = 0; i < len; i++) {
					let node = {
						type: _type,
						day: arr[i]
					};
					list.push(node);
				}
				return list;
			},

			/*判断是否闰年*/
			isLeapYear(year) {
				return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
			},

			/*获得每个月的日期有多少，注意 month - [0-11]*/
			getMonthCount(year, month) {
				let arr = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
				let count = arr[month] || (this.isLeapYear(year) ? 29 : 28);
				return Array.from(new Array(count), (item, value) => value + 1);
			},

			/*获得某年某月的 1号 是星期几，这里要注意的是 JS 的 API-getDay() 是从 [日-六](0-6)，返回 number*/
			getWeekday(year, month) {
				let date = new Date(year, month, 1);
				return date.getDay();
			},

			/*获得上个月的天数*/
			getPreMonthCount(year, month) {
				if (month === 0) {
					return this.getMonthCount(year - 1, 11);
				} else {
					return this.getMonthCount(year, month - 1);
				}
			},

			/*获得下个月的天数*/
			getNextMonthCount(year, month) {
				if (month === 11) {
					return this.getMonthCount(year + 1, 0);
				} else {
					return this.getMonthCount(year, month + 1);
				}
			},

			/*跳转规则页面*/
			gotoRuleFunc() {
				this.gotoPage('/pages/plus/signin/rule/rule');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.signin-container {
		padding-bottom: 20rpx;
	}

	.signin-top {
		background: linear-gradient(45deg, #EFEAFA 0%, #F4D6E5 13%, #E6F2FE 100%);
		height: 453rpx;
		position: relative;
		z-index: 1;
		padding: 42rpx 24rpx;
		box-sizing: border-box;

		.signin-top-left {
			width: 244rpx;
		}
	}

	.signin-container .sigin-title {
		padding-top: 40rpx;
		height: 200rpx;
		color: #ffe19f;
	}

	.signin-container .sigin-title text {
		font-size: 80rpx;
		font-weight: bold;
	}

	.signin-container .sign-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1;
	}

	.signin-container .sign-main {
		margin: 45rpx;
	}

	.signin-container .sign-main-bg {
		background: #ff5649;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 16rpx 0 rgba(0, 0, 0, 0.2);
	}

	.signin-container .sign-main .sign-head {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #ffffff;
	}

	.signin-container .sign-main .sign-head .big {
		font-size: 30rpx;
	}

	.sign-calendar-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 -4rpx 8rpx 0 rgba(0, 0, 0, 0.1);

		.date-text {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #000;
			font-size: 32rpx;
			font-weight: bold;
		}

		.week-list {
			display: flex;
			justify-content: flex-start;
			padding: 0 46rpx;

			.week-item {
				width: 94rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.date-list-wrap {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding: 0 46rpx;

			.date-item {
				width: 94rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				.icon-box {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: #ff5850;
					color: #ffffff;
				}

				.iconfont {
					color: #ff5850;
					font-size: 50rpx;
					font-weight: 100;
				}
			}

			.secondary-date-item {
				color: #efe3c8;
			}
		}
	}

	.sign-main .btns {
		margin-top: 40rpx;
		padding: 0 20rpx 40rpx;
	}

	.sign-main .btns button {
		height: 100rpx;
		line-height: 100rpx;
		text-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.3);
		border-radius: 50rpx;
		font-size: 36rpx;
		background: linear-gradient(0deg, #ff4239, #ff5850, #ff6a63);
		box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
		color: #ffe4e2;
	}

	.rule-btn {
		position: fixed;
		top: calc(var(--window-top) + 30rpx);
		padding: 0 20rpx 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		background: linear-gradient(90deg, #ff5850, #e2231a);
		box-shadow: 0 10rpx 16rpx 0 rgba(0, 0, 0, 0.2);
		border-radius: 40rpx 0 0 40rpx;
		color: #ffffff;
		right: 0;
		z-index: 1;
	}

	.signin-container .btns .iconfont {
		font-size: 40rpx;
		color: yellow;
	}

	.pop-bg {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.signin-top-img {
		width: 203rpx;
		height: 180rpx;
		position: absolute;
		right: 24rpx;
		top: 59rpx;
		z-index: 1;
	}

	.icon-jiantou1 {
		font-size: 24rpx;
		color: #999;
	}

	.clock-in-box {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 35rpx 24rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: -256rpx;
		position: relative;
		z-index: 1;
		margin-bottom: 20rpx;

		.gift-btn {
			position: absolute;
			right: -22rpx;
			top: -22rpx;
			z-index: 1;
			width: 42rpx;
			height: 42rpx;
		}

		.thisWeek-item {
			width: 76rpx;
			height: 108rpx;
			background: #FDF6E3;
			border-radius: 15rpx;
			margin-bottom: 15rpx;

			.thisWeek-points {
				display: block;
				width: 44rpx;
				height: 44rpx;
				margin-top: 10rpx;
			}
		}

		.thisWeek-item.isSign {
			background: #F3F4F9;
		}

		.singnin-btn {
			background: linear-gradient(0deg, #FDF3BF 0%, #FAC233 29%, #FAC233 100%);
			font-size: 30rpx;
			font-weight: bold;
			color: #E37012;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 392rpx;
			height: 82rpx;
			line-height: 82rpx;
			border-radius: 44rpx;
		}

		.singnin-btn.singnined {
			background: #EEEFF3;
			color: #A2AABA;
		}
	}

	.my-signin {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 35rpx 18rpx 2rpx 18rpx;
		box-sizing: border-box;
		margin: auto;
		margin-bottom: 20rpx;

		.my-signin-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}

		.my-signin-item {
			width: 322rpx;
			height: 142rpx;
			padding: 38rpx 30rpx;
			box-sizing: border-box;
			position: relative;
			border-radius: 25rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			margin-bottom: 20rpx;

			.round-opacity {
				position: absolute;
				right: -18rpx;
				bottom: -31rpx;
				z-index: 1;
				width: 128rpx;
				height: 128rpx;
				opacity: 0.15;
				border-radius: 50%;

			}
		}

		.my-item-1 {
			background: #FFF7E2;

			.round-opacity {
				background: linear-gradient(0deg, #FA9A46 0%, rgba(255, 255, 255, 0) 100%);
			}

		}

		.my-item-2 {
			background: #FDEDEE;

			.round-opacity {
				background: linear-gradient(0deg, #FDB9CA 0%, rgba(255, 255, 255, 0) 100%);
			}
		}

		.my-item-3 {
			background: #F5F8FE;

			.round-opacity {
				background: linear-gradient(0deg, #E6C4EC 0%, rgba(255, 255, 255, 0) 100%);
			}
		}

		.my-item-4 {
			background: #F2FAFE;

			.round-opacity {
				background: linear-gradient(0deg, #2989CC 0%, #FFFFFF 100%);
			}
		}
	}

	.signin-record {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 35rpx 18rpx 35rpx 18rpx;
		box-sizing: border-box;
		margin: auto;
		margin-bottom: 20rpx;

		.signin-record-item {
			border-bottom: 1px solid #eee;
			padding: 30rpx 0 13rpx 0;
			word-break: break-all;
		}

		.signin-record-item:last-child {
			border: none;
		}

		.thisWeek-points {
			width: 29rpx;
			height: 29rpx;
			margin-right: 6rpx;
			display: block;
			flex-shrink: 0;
		}
	}

	.icon.icon-gantanhao1 {
		color: #FF8044;
		font-size: 26rpx;
		margin-right: 6rpx;
	}

	.pop-success {
		width: 572rpx;
		background-color: #fff;
		border-radius: 35rpx;
		box-shadow: 0rpx 8rpx 3rpx 0rpx rgba(6, 0, 1, 0.03);
		position: relative;
		padding: 100rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		z-index: 2;

		.pop-success-top {
			width: 604rpx;
			height: 294rpx;
			position: absolute;
			left: -16rpx;
			top: -232rpx;
			z-index: 2;
		}

		.pop-success-title {
			font-weight: bold;
			text-align: center;
			color: #FC674C;
			font-size: 36rpx;
		}

		.pop-success-content {
			padding: 30rpx 0;
			width: 100%;
			word-break: break-all;
			box-sizing: border-box;
		}

		.thisWeek-points {
			width: 29rpx;
			height: 29rpx;
			margin-right: 6rpx;
			display: block;
			flex-shrink: 0;
		}

		.pop-success-btn {
			width: 256rpx;
			height: 66rpx;
			background: linear-gradient(0deg, #FDF3BF 0%, #FAC233 29%, #FAC233 100%);
			border-radius: 33rpx;
			color: #E37012;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>